<template>
  <div class="query">
    <!-- 查询 -->
    <div class="query-arg">
      <div class="query-arg-content">
        <input type="text" placeholder="请输入查询参数">
        <el-button type="primary">查询</el-button>
      </div>
      <div class="query-arg-class">
        <el-radio-group v-model="radio2">
          <el-radio :label="0">全部查询</el-radio>
          <el-radio :label="1">按学号查询</el-radio>
          <el-radio :label="2">按身份证查询</el-radio>
          <el-radio :label="3">按姓名查询</el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 学生信息 筛选 -->
    <div class="clearfix student-info">
      <div class="fl school">
        <span>学校名称:</span>
        <el-select v-model="valueSchool" placeholder="请选择学校">
          <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="fl school">
        <span>学院名称:</span>
        <el-select v-model="valueSchool" placeholder="请选择学院">
          <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="fl school">
        <span>年级:</span>
        <el-select v-model="valueYear" placeholder="请选择年级">
          <el-option
          v-for="item in optionsYear"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="fl school">
        <span>专业名称:</span>
        <el-select v-model="valueSchool" placeholder="请选择专业">
          <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="fl school">
        <span>班级名称:</span>
        <el-select v-model="valueSchool" placeholder="请选择班级">
          <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 账号列表 -->
    <div class="config-header">民主互评反馈信息统计</div>
    <!-- 全选 or 批量删除 -->
    <div class="all-select">
      <el-button type="primary">批量删除</el-button>
    </div>
    <!-- 列表 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        >
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        prop="id"
        label="序号"
        width="180">
        </el-table-column>
        <el-table-column
        prop="accountName"
        label="学期"
        width="180">
        </el-table-column>
        <el-table-column
        prop="mobile"
        label="资助学生姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="idCard"
        label="民主互评人员姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="idCardNumber"
        label="民主互评人员职位"
        width="180">
        </el-table-column>
        <el-table-column
        prop="name"
        label="分数"
        width="180">
        </el-table-column>
        <el-table-column
        prop="identity"
        label="提交日期"
        :formatter="formatter">
        </el-table-column>
        <el-table-column
        prop="updateTime"
        label="完成状态"
        width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="changeValue(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteValue(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000">
        </el-pagination>
      </div>
    </div>
    <!-- 弹出框 添加账号信息 -->
    <el-dialog title="新增账号信息" :visible.sync="dialogFormVisible">
      <el-form class="demo-dynamic" :model="formData">
        <el-form-item label="账号名:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联手机号:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input type="number" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-select placeholder="请选择类型">
            <el-option label="身份证" value="shanghai"></el-option>
            <el-option label="港澳来往大陆通行证" value="beijing"></el-option>
            <el-option label="台湾来往大陆通行证" value="beijing"></el-option>
            <el-option label="护照" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input type="text" placeholder="请输入证件号码"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input type="text" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请填写身份"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input type="text" placeholder="请输入新密码"></el-input>
          <span >请输入5至12位数字、字母混合密码</span>
        </el-form-item>
        <el-form-item label="确认密码:" :label-width="formLabelWidth" :rules="[{ required: true, message: '年龄不能为空'}]">
          <el-input type="text" placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item label="指定院系:" :label-width="formLabelWidth">
          <el-select placeholder="请选择指定院系">
            <el-option label="身份证" value="shanghai"></el-option>
            <el-option label="港澳来往大陆通行证" value="beijing"></el-option>
            <el-option label="台湾来往大陆通行证" value="beijing"></el-option>
            <el-option label="护照" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指定年级:" :label-width="formLabelWidth">
          <el-select placeholder="请选择年级">
            <el-option
            v-for="item in optionsYear"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input type="textarea" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出框 修改账号信息-->
    <el-dialog title="修改账号信息" :visible.sync="dialogFormVisible1">
      <el-form :model="formData">
        <el-form-item label="账号名:" :label-width="formLabelWidth">
          <el-input autocomplete="off"></el-input>
          <span class="date-picker-tishi">不可修改</span>
        </el-form-item>
        <el-form-item label="关联手机号:" :label-width="formLabelWidth">
          <el-input type="number" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:" :label-width="formLabelWidth">
          <el-select placeholder="请选择类型">
            <el-option label="身份证" value="shanghai"></el-option>
            <el-option label="港澳来往大陆通行证" value="beijing"></el-option>
            <el-option label="台湾来往大陆通行证" value="beijing"></el-option>
            <el-option label="护照" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请输入证件号码"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请填写身份"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请输入新密码"></el-input>
          <span >请输入5至12位数字、字母混合密码</span>
        </el-form-item>
        <el-form-item label="确认密码:" :label-width="formLabelWidth">
          <el-input type="text" placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item label="指定院系:" :label-width="formLabelWidth">
          <el-select placeholder="请选择指定院系">
            <el-option label="身份证" value="shanghai"></el-option>
            <el-option label="港澳来往大陆通行证" value="beijing"></el-option>
            <el-option label="台湾来往大陆通行证" value="beijing"></el-option>
            <el-option label="护照" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指定年级:" :label-width="formLabelWidth">
          <el-select placeholder="请选择年级">
            <el-option
            v-for="item in optionsYear"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input type="textarea" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'democracyStatistical',
  data () {
    return {
      radio2: 0,
      options: [
        {
          value: '福州大学',
          label: '福州大学'
        }
      ],
      optionsYear: [
        {
          valueYear: '2019',
          label: '2019'
        },
        {
          valueYear: '2018',
          label: '2018'
        },
        {
          valueYear: '2017',
          label: '2017'
        },
        {
          valueYear: '2016',
          label: '2016'
        },
        {
          valueYear: '2015',
          label: '2015'
        },
        {
          valueYear: '2014',
          label: '2014'
        }
      ],
      valueSchool: '福州大学',
      valueYear: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      tableData: [{
        id: '1',
        accountName: '王小虎',
        mobile: '123456789',
        idCard: '1234567890',
        idCardNumber: '1234567890',
        name: '真实姓名',
        identity: '身份',
        accountClass: '账号类型',
        departments: '院系',
        grade: '年级',
        major: '专业',
        class: '班级',
        describe: '描述',
        updateTime: '更新时间',
        status: '状态'
      }, {
        id: '2',
        accountName: '王小虎1',
        mobile: 'a123456789',
        idCard: 'a1234567890',
        idCardNumber: 'a1234567890',
        name: '真实姓名1',
        identity: '身份1',
        accountClass: '账号类型1',
        departments: '院系1',
        grade: '年级1',
        major: '专业1',
        class: '班级1',
        describe: '描述1',
        updateTime: '更新时间1',
        status: '状态1'
      }],
      currentPage4: 5,
      multipleSelection: [],
      formData: []
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    formatter (row, column) {
      return row.address
    },
    // 编辑当前记录
    changeValue (row) {
      console.log('row', row)
      this.rowdata = row
      this.dialogFormVisible1 = true
    },
    // 删除当前行 公告
    deleteValue (row) {
      this.$confirm('确定删除此公告吗?', '删除公告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 全选
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss">
.el-dialog__wrapper{
  padding-bottom: 60px;
}
.el-form-item__content{
  text-align: left;
}
</style>
<style lang="scss" scoped>
.query{
  .student-info{
    .school{
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  .all-select{
    height: 60px;
    line-height: 60px;
    text-align: left;
  }
  .date-picker-tishi{
    color: red;
  }
  .query-arg{
    margin-bottom: 10px;
    .query-arg-content{
      input{
        height: 33px;
      }
    }
    .query-arg-content,.query-arg-class{
      text-align: left;
    }
  }
}
</style>
